<script>
import {updateUser, userDetail} from "../../../api/user";
import {ElMessage} from "element-plus";

export default {
    name: "Account",
    data() {
        return {
            editBox: new Map(),
            user: {},
        }
    },

    methods: {
        showEdit(key) {
            var old = this.editBox.get(key);
            this.editBox.set(key, !old)
        },
        getUser() {
            if (!this.$store.state.user){
                const id = this.$store.state.userInfo.userId
                userDetail(id)
                    .then(res => {
                        if (res.code === 200){
                            this.$store.commit('setUser',res.data)
                            this.user = res.data
                        }
                    })
            }else this.user=this.$store.state.user
        },
    },
    created() {
        this.getUser()
    }
}
</script>

<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div style="width: 100%">
                <h2>账号设置</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex row center align-center">
                <div style="width: 90px;height: 90px;position: relative;cursor: pointer" >
                    <img :src="user.avatar" alt="" style="height: 90px;width: 90px;position: absolute;border-radius: 50%;cursor: pointer">
                </div>
                <div class="flex column center align-center">
                    <h1>{{ user.name }}</h1>
                </div>
            </div>
            <el-divider/>
            <div class="flex column" style="width: 100%">
                <div class="flex row align-center space-between" style="width: calc(100% - 2rem);margin:0 1rem">
                    <span>密码</span>
                    <router-link to="/manage/update/password" class="modify-btn">修改密码</router-link>
                </div>
                <el-divider/>
                <div class="flex row align-center space-between" style="width: calc(100% - 2rem);margin:0 1rem">
                    <span>手机</span>
                    <router-link to="/manage/update/phone" class="modify-btn">修改手机</router-link>
                </div>
                <el-divider/>
                <div class="flex row align-center space-between" style="width: calc(100% - 2rem);margin:0 1rem">
                    <span>邮箱</span>
                    <router-link to="/manage/update/email" class="modify-btn">修改邮箱</router-link>
                </div>
                <el-divider/>
                <div class="flex row align-center space-between" style="width: calc(100% - 2rem);margin:0 1rem">
                    <span>三方账号</span>
                    <span class="modify-btn">绑定/解绑</span>
                </div>
                <el-divider/>
                <div class="flex row align-center space-between" style="width: calc(100% - 2rem);margin:0 1rem">
                    <span>账号注销</span>
                    <span class="modify-btn">立即注销</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.modify-btn{
    color: #00a1ba;
    cursor: pointer;
    font-size: 14px;
}
.form-item {
    .form-icon {
        margin-left: 30px;
        cursor: pointer;
        opacity: 0;
        color: #00a1ba;
    }
}

.form-item:hover {
    .form-icon {
        opacity: 1;
    }
}

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}
</style>
